<template>
  <div class="persondata">
    <div class="line">
      <span>|</span>
      <span>{{ cropName }}</span>
      <el-button type="primary" size="small" icon="el-icon-arrow-left" class="return" @click="goback">返回</el-button>
    </div>
    <div class="content">
      <div class="left-content">
        <el-form label-position="right" label-width="80px" :model="formLabelAlign">
          <el-form-item label="姓名:">
            <el-form-item v-model="formLabelAlign.studentName">{{ formLabelAlign.studentName }}</el-form-item>
          </el-form-item>
          <el-form-item label="年级:">
            <el-form-item v-model="formLabelAlign.gradeName">{{ formLabelAlign.gradeName }}</el-form-item>
          </el-form-item>
          <el-form-item label="批次:">
            <el-form-item v-model="formLabelAlign.batch">{{ formLabelAlign.batch }}</el-form-item>
          </el-form-item>
        </el-form>
      </div>
      <div class="right-content">
        <el-form label-position="right" label-width="100px" :model="formLabelAlign">
          <el-form-item label="班级:">
            <el-form-item v-model="formLabelAlign.className">{{ formLabelAlign.className }}</el-form-item>
          </el-form-item>
          <el-form-item label="实训报告名称:">
            <el-form-item v-model="formLabelAlign.trainingReportName">{{ formLabelAlign.trainingReportName }}</el-form-item>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="showpdf">
      <iframe src="http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf" width="65%" height="600px">
        This browser does not support PDFs. Please download the PDF to view it: <a href="/test.pdf" rel="external nofollow" >Download PDF</a>
      </iframe>
    </div>
    <div class="footer">
      <el-form ref="formLabelAlign" label-position="right" label-width="80px" :model="formLabelAlign">
        <el-form-item label="评语:" required>
          <el-input v-model="formLabelAlign.comments" type="textarea" class="inputdesc" :autosize="{minRows:6, maxRows:6}" required />
        </el-form-item>
        <el-form-item
          label="分数"
          prop="score"
          :rules="[
            { required: true, message: '分数不能为空'},
            { type: 'number', message: '分数必须为数字值'}
          ]"
        >
          <el-input v-model.number="formLabelAlign.score" type="text" placeholder="请输入得分" autocomplete="off" />
        </el-form-item>
        <el-form-item class="button-footer">
          <el-button type="primary" @click="submitForm">保存</el-button>
          <el-button @click="goback">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { getReportDetail } from '@/api/report'
import { ModifyReport } from '@/api/report'

export default {
  data() {
    return {
      cropId: '',
      cropName: '',
      role: '',
      input: '',
      value: '0',
      startvalue: '',
      endvalue: ' ',
      pdfurls: '//cdn.mozilla.net/pdfjs/tracemonkey.pdf',
      isshowpdf: false,
      formLabelAlign: {
        score: '',
        comments: ''
      }
    }
  },
  created() {
    this.cropName = this.$store.getters.cropName
    const manageData = {
      trainingReportId: this.$route.params.trainingReportId
    }
    getReportDetail(manageData).then(res => {
      this.formLabelAlign = res.data
    })
    this.role = this.$store.getters.roles[0]
    console.log(this.role)
  },
  methods: {
    goback() {
      this.$router.go(-1)
    },
    closepdf() {
      this.isshowpdf = false
    },
    pdferr(errurl) {
      console.log(errurl)
    },
    submitForm() {
      console.log('submint')
      const commentData = {
        trainingReportId: this.$route.params.trainingReportId,
        score: this.formLabelAlign.score,
        comments: this.formLabelAlign.comments
      }
      console.log(commentData)
      ModifyReport(commentData).then(res => {
        if (res.message == '成功！') {
          this.$message({
            message: '保存成功！',
            type: 'success'
          })
          this.goback()
        } else {
          this.$message({
            message: '保存失败！',
            type: 'error'
          })
        }
      })
    }
  }
}
</script>
<style scoped>
    .line{
        width: 100%;
        color: #345E8F;
        font-size: 16px;
        margin-bottom: 1%;
    }
    span:first-child{
        font-weight: bold;
        margin-right: 1%;
        font-size: 18px;
    }
    .header{
        display: flex;
        margin-top: 2%;
        margin-bottom: 1%;
    }
    .left{
        display: flex;
        justify-content: flex-start;
    }
    .return{
        float: right;
        margin-right: 30px;
    }
    .showpdf{
      text-align: center;
      margin: 30px;
      /* background-color: aqua; */
    }
    .content{
      display: flex;
      display: -webkit-flex;
      width: 100%;
      /* background-color: chartreuse; */
    }
    .left-content{
      width: 30%;
      margin: 10px;
      margin-left: 300px;
      /* background-color: red; */
    }
    .right-content{
      width: 30%;
      margin: 10px;
      margin-right: 300px;

    }
    .footer{
      width: 30%;
      margin: 10px;
      margin-left: 300px;
    }
    .inputdesc{
      width: 200%;
    }
    .button-footer{
      text-align: right;
    }
</style>
